<template>
  <div class="container">
    <header class="d-flex middle">
      <div class="header-left flex-1 d-flex middle">
        <span @click="switchTab" id="constellation">
          星座
          <i class="iconfont icon-zhuanhuan"></i>
        </span>
      </div>
      <div class="calendar d-flex flex-2 space-center middle" @click="showCalendar" id="eject-luck">
        <span class="text">{{ currentDate }}</span>
        <i class="iconfont icon-rili"></i>
      </div>
       <div class="sign flex-1 d-flex flex-end" @click="showWrap" id="everyday-lottery">
         <span>每日一签</span>
       </div>
    </header>
    <main class="main">
      <!--日历-->
      <van-dialog v-model="show" :show-confirm-button="false" :closeOnClickOverlay="true">
        <div class="header d-flex middle">
          <van-icon name="cross" class="flex-1" @click="closeDialog" id="close-luck"></van-icon>
          <div class="flex-2 d-flex space-center">
            选择吉日
          </div>
          <div class="flex-1 share d-flex flex-end">
            <!-- <button open-type="share" id="shareSuit">
              <i class="iconfont icon-weixin"></i>
            </button> -->
          </div>
        </div>
        <ul class="select-suit d-flex">
          <li v-for="(item, index) in suitList" :key="index" :class="['flex-1',currentSuit === index ? 'activeSuit' : '']" id="select-suit" @click="selectSuit(index)">{{ item }}</li>
        </ul>
        <calendar multi :value="suitDate" lunar @select="selectDate"></calendar>
      </van-dialog>
      <!-- 每日一签 -->
      <van-dialog v-model="showLottery" :show-confirm-button="false" :closeOnClickOverlay="true">
        <lottery :lottery="lotteryInfo" @close-dialog="closeLotteryDialog"></lottery>
      </van-dialog>
      <!--宜、忌事宜-->
      <div class="event">
        <div class="item-1">
          <p>{{ calendar.date }}</p>
          <p>{{ calendar.yinli }}</p>
        </div>
        <div class="item suit">
          <span class="green">宜</span>
          <span class="right">{{ calendar.yi }}</span>
        </div>
        <div class="item avoid">
          <span class="red">忌</span>
          <span class="right">{{ calendar.ji }}</span>
        </div>
      </div>
      <!--黄历表格-->
      <div class="table">
        <div class="item item-1">
          <div class="border d-flex flex-1 space-center">
            <span class="title">五行</span>
            <span>{{ calendar.wuxing }}</span>
          </div>
          <div class="d-flex flex-1 space-center">
            <span class="title">冲煞</span>
            <span>{{ calendar.chongsha }}</span>
          </div>
        </div>
        <div class="item item-2">
          <div class="luck border flex-1">
            <p class="title">吉神宜趋</p>
            <p style="text-align: center;">{{ calendar.jishen }}</p>
          </div>
          <div class="fierce flex-1">
            <p class="title">凶神宜忌</p>
            <p style="text-align: center;">{{ calendar.xiongshen }}</p>
          </div>
        </div>
        <div class="item-3">
          <div class="title">彭祖百忌</div>
          <div>{{ calendar.baiji }}</div>
        </div>
        <div class="item-3">
          <div class="title">十二时辰宜忌</div>
        </div>
        <div class="item-4" v-for="(item, index) in hoursList" :key="index">
          <ul>
            <li class="li-content">
              <div class="left border d-flex column space-center middle">
                <p>{{ item.hours_name }}</p>
                <p>{{ item.hours }}</p>
              </div>
              <div class="right">
                <div class="suit">
                  <span class="p-left">宜:</span>
                  <span class="p-right">{{ item.yi }}</span>
                </div>
                <div class="avoid">
                  <span class="p-left">忌:</span>
                  <span class="p-right">{{ item.ji }}</span>
                </div>
                <div class="des">
                  <p class="p-left">描述:</p>
                  <p class="p-right">{{ item.des }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--每日一签-->
      <div class="wrap" v-show="ifWrapShow" @click="closeWrap">
        <div class="divination">
          <img src="static/images/lottery.png" @click="lottery">
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import Calendar from 'mpvue-calendar'
import 'mpvue-calendar/src/browser-style.css'
import Lottery from './Lottery'

export default {
  components: {
    Calendar,
    Lottery
  },
  data () {
    return {
      ifShow: false,
      ifWrapShow: false,
      region: ['北京', '北京市'],
      images: [],
      calendar: {},
      hoursList: [],
      show: false,
      currentDate: '',
      day: '',
      selectedDate: '', // 已选择的日期
      currentSuit: '', // 当前日历吉日
      suitList: ['嫁娶', '入宅', '出行', '订盟', '破土'],
      suitDate: [], // 选择的吉日
      showLottery: false, // 每日一签弹框
      lotteryInfo: {}, // 抽签结果
      num: 0, // 判断是否第一次点击求一签
      cancel: 1 // 判断是否第一次取消求一签
    }
  },
  created () {
    this.getCurrentDate()
    this.getTodayInfo()
  },
  methods: {
    // 获取当天日期
    getCurrentDate () {
      var date = new Date()
      this.currentDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
      this.day = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    // 切换到星座页面
    switchTab () {
      localStorage.setItem('likeType', '1')
      this.$emit('changeShow', false) // 切换黄历星座显隐
    },
    // 获取当天信息
    getTodayInfo () {
      this.$http.get({
        url: this.$services.HUANG_LI,
        data: {
          d: this.selectedDate
        }
      }).then(res => {
        if (res.code === 0) {
          this.calendar = res.body.day
          this.calendar.date = res.body.day.yinli.slice(-4)
          this.calendar.yi = res.body.day.yi.split(' ').slice(0, 4).join(' ')
          this.calendar.jishen = res.body.day.jishen.split(' ').slice(0, 4).join(' ')
          this.calendar.xiongshen = res.body.day.xiongshen.split(' ').slice(0, 4).join(' ')
          this.hoursList = res.body.hours
        }
      })
    },
    // 选择的日期
    selectDate (e) {
      this.suitDate = []
      this.currentSuit = ''
      var date = e[e.length - 1]
      this.suitDate.push(date)
      this.currentDate = date.join().replace(',', '年').replace(',', '月') + '日'
      var arr = []
      for (let v of date) {
        if (v < 10) {
          v = '0' + v
        }
        arr.push(v)
      }
      this.selectedDate = arr.join('-')
      this.getTodayInfo()
      this.show = false
      _czc.push(['_trackEvent', 'almanac_date_select'])
    },
    // 选择吉日
    selectSuit (index) {
      this.$http.get({
        url: this.$services.HUANG_LI,
        data: {
          tp: this.suitList[index],
          d: this.day
        }
      }).then(res => {
        if (res.code === 0) {
          const arr = []
          for (const v of res.body.days) {
            const arr1 = []
            for (const v1 of v.split('-')) {
              arr1.push(parseInt(v1))
            }
            arr.push(arr1)
          }
          this.suitDate = arr
          this.currentSuit = index
          _czc.push(['_trackEvent', 'luckyday_click', index])
        }
      })
    },
    // 获取1-64随机整数
    random (m, n) {
      return Math.floor(Math.random() * (m - n) + n)
    },
    // 每日一签
    lottery () {
      this.$http.get({
        url: this.$services.GET_LOTTERY,
        data: {
          lb_n: this.random(1, 64)
        }
      }).then(res => {
        if (res.code === 0) {
          // this.showLottery = true
          this.lotteryInfo = res.body
          this.num++
        }
      })
    },
    showCalendar () {
      this.show = true
      _czc.push(['_trackEvent', 'almanac_calendar_click'])
    },
    showWrap () {
      this.ifWrapShow = !this.ifWrapShow
      setTimeout(() => {
        this.showLottery = true
        this.lottery()
        this.ifWrapShow = false
      }, 1000)
      _czc.push(['_trackEvent', 'drawlots_click'])
    },
    closeWrap () {
      this.ifWrapShow = false
    },
    // 关闭对话框
    closeDialog () {
      this.show = false
      _czc.push(['_trackEvent', 'almanac_calendar_close'])
    },
    // 关闭每日一签弹框
    closeLotteryDialog () {
      this.showLottery = false
      this.cancel--
    }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    padding: 0 10px;
    .van-dialog {
      width: 95%;
    }
    .title {
      color:#d08538;
    }
    .selectLike {
      text-align: center;
      padding: 0 10px;
      h4 {
        margin: 10px 0;
        font-size: 18px;
        font-weight: bold;
      }
      button {
        margin: 10px 0;
      }
    }
    header {
      padding: 10px 0;
      .common {
        font-size: 16px;
        border-radius: 5px;
        padding: 3px 5px;
      }
      .header-left {
        span {
          @extend .common;
          background: #ffa92d;
        }
      }
      .calendar {
        .text, i {
          font-size: 20px;
        }
      }
      .sign {
        span {
          @extend .common;
          color: #fff;
          background: #d13c40;
        }
      }
    }
    .main{
      .header {
        margin: 5px 0;
        padding-left: 10px;
      }
      .select-suit {
        margin: 10px 0;
        li {
          background: #fcf7f3;
          color: #c5bdb2;
          font-size: 14px;
          border-radius: 8px;
          padding: 2px 5px;
          margin: 0 10px;
          text-align: center;
        }
        .activeSuit {
          color: #f00;
        }
      }
      .calender {
        position: relative;
        text-align: center;
        .date {
          display: flex;
          justify-content: center;
          align-items: center;
          .text {
            font-size: 30px;
            font-weight: bold;
            color: darkred;
          }
          text {
            font-size: 20px;
          }
        }
        .sign {
          position: absolute;
          top: 15px;
          right: 0;
        }
      }
      .event {
        .item-1 {
          text-align: center;
          p {
            &:first-child {
              font-size: 30px;
              color: #f00;
              margin: 0 0 10px;
            }
            &:last-child {
              font-size: 16px;
              margin: 0;
            }
          }
        }
        .suit {
          color: green;
          line-height: 0;
        }
        .avoid {
          color: red;
          line-height: 60px;
        }
        .item {
          .common {
            color: #fff;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 14px;
          }
          .green {
            @extend .common;
            background: green;
          }
          .red {
            @extend .common;
            background: #f00;
          }
          .right {
            margin-left: -15px;
            font-size: 16px;
          }
        }
      }
      .table {
        border: 1px solid #CCC;
        font-size: 16px;
        margin-bottom: 10px;
        .border {
          border-right-color: #CCC;
          border-right-style: solid;
          border-right-width: 1px;
        }
        .item {
          p, span {
            margin: 5px 0;
          }
        }
        .item-1 {
          border-bottom: 1px solid #CCC;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          .title {
            margin-right: 5px;
          }
        }
        .item-2 {
          border-bottom: 1px solid #CCC;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          .title {
            text-align: center;
          }
          .ul-box {
            display: flex;
            flex-direction: row;
            /*justify-content: space-around;*/
            min-height: 50px;
            word-break: normal;
            li {
              float: left;
              padding-right: 10px;
            }
          }
        }
        .item-3 {
          text-align: center;
          border-bottom: 1px solid #CCC;
          padding: 5px 0;
        }
        .item-4 {
          border-bottom: 1px solid #ccc;
          line-height: 25px;
          .li-content {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            .left {
              flex: 1;
              div {
                height: 50px;
              }
              p {
                margin: 0;
              }
            }
            .right {
              padding: 5px;
              flex: 4.5;
              .suit {
                .p-left {
                  color: green;
                  margin-right: 5px;
                }
              }
              .avoid {
                .p-left {
                  color: #f00;
                  margin-right: 5px;
                }
              }
              .des {
                p {
                  margin: 0;
                }
              }
            }
          }
        }
      }
      .every-sign {
        padding: 10px 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .item {
          text-align: center;
          a {
            height: 40px;
            width: 40px;
            display: inline-block;
            img {
              display: inline-block;
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background: darkslateblue;
            }
          }
          p {
            font-size: 12px;
          }
        }
      }
      .wrap{
        position: fixed;
        top: 0;
        bottom:0;
        left:0;
        right:0;
        margin: auto;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        .divination{
          position: fixed;
          top: 0;
          bottom:0;
          left:0;
          right:0;
          margin: auto;
          width: 100px;
          height: 150px;
          img {
            display: inline-block;
            width: 100%;
            height:100%;
            animation: swing 2s .15s linear 1;
          }
          @keyframes swing {
            0% {
              transform: rotate(0deg);
            }
            25% {
              transform: rotate(-25deg);
            }
            50% {
              transform: rotate(25deg);
            }
            75% {
              transform: rotate(-25deg);
            }
            100% {
              transform: rotate(0deg);
            }
          }
        }
      }
    }

  }
</style>
